<template>
  <el-dialog
    title="日记内容详情"
    :visible.sync="visible"
    width="60%"
    append-to-body
  >
    <avue-form
      v-model="form"
      :option="detailOption"
    >
      <template #content>
        <span>{{ form.content }}</span>
      </template>
      <template #files>
        <div class="file-wrapper">
          <div
            v-for="(item, idx) in files"
            :key="idx"
            class="flex record"
          >
            <el-image
              v-if="item.type === 'image'"
              :src="item.url"
              class="file-item"
              fit="fill"
              :preview-src-list="[item.url]"
              alt=""
            />
            <video
              v-if="item.type === 'video'"
              :src="item.url"
              controls="controls"
              class="file-item"
            >
              您的浏览器不支持 video 标签。
            </video>
          </div>
        </div>
      </template>
    </avue-form>
  </el-dialog>
</template>
<script>
import { getAdoptDiaryDetail } from '@/api/core/adopt';
import { detailOption } from '@/const/crud/pet/adoptDiary';
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    id: [String, Object],
  },
  data() {
    return {
      detailOption,
      form: {},
      files: [],
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {
    visible(val) {
      if (val && this.id) {
        this.getAdoptDiaryDetail();
      } else {
        this.form = {};
        this.files = [];
      }
    },
  },
  methods: {
    getAdoptDiaryDetail() {
      getAdoptDiaryDetail(this.id).then((res) => {
        if (res.data.code === 0) {
          this.form = res.data.data;
          this.files = JSON.parse(this.form.files);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.file-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .record {
    width: calc((100% - 30px) / 3);
    height: 100%;
    display: block;
    margin-right: 10px;
    .file-item {
      height: 200px;
      width: 100%;
    }
  }
}
</style>
